<template>
    <div class="adminTaskInfo">

        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-select v-model="searchList.search" placeholder="请选择" size="mini" style="width: 90px" height="250">
                    <el-option v-for="item in searchs" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入内容" size="mini" v-model="searchList.searchValue"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" @click="getCommentList">搜索
                </el-button>
            </el-form-item>

            <el-form-item>
              <el-button size="mini" @click="goodSend1=true" type="primary" class="el-icon-plus">
                默认评价模板
              </el-button>
              <el-button @click="goodSend2=true" size="mini" type="primary" class="el-icon-plus">
                追加评价模板
              </el-button>
            </el-form-item>
        </el-form>


      <!--卡片-->
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" >
          <!--tab1-->
          <el-tab-pane label="默认好评审核" name="normal">

            <el-table v-loading="loading" @filter-change="filter" :data="commentData" @selection-change="handleSelectionChange"
                      style="width: 100%;">
              <el-table-column prop="id" label="序号" width="60">
              </el-table-column>
              <el-table-column prop="task.id" label="任务序号" width="100">
              </el-table-column>
              <el-table-column prop="task.shop" label="店铺" width="200">
              </el-table-column>
              <el-table-column prop="task.babyId" label="宝贝ID" width="120">
                <template slot-scope="props">
                  <a target="_blank" :href="'https://detail.tmall.com/item.htm?id=' + props.row.task.babyId">
                    {{props.row.task.babyId}}
                  </a>
                </template>
              </el-table-column>
              <el-table-column prop="task.babyName" label="产品名称" width="200">
              </el-table-column>
              <el-table-column prop="user" label="评价人" width="170">
              </el-table-column>
              <el-table-column prop="okTime" label="评价图片" width="150">
                <template slot-scope="props">
                  <el-button type="text" @click="goodUpdate=true;imgIdSrc=props.row.img">
                    <img :src="props.row.img" with="50px" height="50px">
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="审核状态" width="120">
                <template slot-scope="scope">
                  <div v-if="scope.row.status === '0'">
                    待审核
                  </div>
                  <div v-if="scope.row.status === '1'">
                    成功
                  </div>
                  <div v-if="scope.row.status === '2'">
                    失败
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="complaint" label="操作" width="160">
                <template slot-scope="scope" v-if="scope.row.status ==0">
                  <el-button type="success" @click="tg(scope.row.id,'through')"
                             size="mini">
                    通过
                  </el-button>
                  <el-button type="warning" @click="tg(scope.row.id,'refuse')"
                             size="mini">
                    拒绝
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination :page-size="10" :current-page="searchList.pn" layout="prev, pager, next"
                           :total="searchList.total" @current-change="pnChange" v-if="searchList.total > 10">
            </el-pagination>

          </el-tab-pane>
          <!--tab2-->
          <el-tab-pane label="追加好评审核" name="toadd">

            <el-table @filter-change="filter" :data="commentData" @selection-change="handleSelectionChange"
                      style="width: 100%;">
              <el-table-column prop="id" label="序号" width="60">
              </el-table-column>
              <el-table-column prop="task.id" label="任务序号" width="100">
              </el-table-column>
              <el-table-column prop="task.shop" label="店铺" width="200">
              </el-table-column>
              <el-table-column prop="task.babyId" label="宝贝ID" width="120">
                <template slot-scope="props">
                  <a target="_blank" :href="'https://detail.tmall.com/item.htm?id=' + props.row.task.babyId">
                    {{props.row.task.babyId}}
                  </a>
                </template>
              </el-table-column>
              <el-table-column prop="task.babyName" label="产品名称" width="200">
              </el-table-column>
              <el-table-column prop="user" label="评价人" width="170">
              </el-table-column>
              <el-table-column prop="okTime" label="评价图片" width="150">
                <template slot-scope="props">
                  <el-button type="text" @click="goodUpdate=true;imgIdSrc=props.row.img">
                    <img :src="props.row.img" with="50px" height="50px">
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="审核状态" width="120">
                <template slot-scope="scope">
                  <div v-if="scope.row.status === '0'">
                    待审核
                  </div>
                  <div v-if="scope.row.status === '1'">
                    成功
                  </div>
                  <div v-if="scope.row.status === '2'">
                    失败
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="complaint" label="操作" width="160">
                <template slot-scope="scope" v-if="scope.row.status ==0">
                  <el-button type="success" @click="tg(scope.row.id,'through')"
                             size="mini">
                    通过
                  </el-button>
                  <el-button type="warning" @click="tg(scope.row.id,'refuse')"
                             size="mini">
                    拒绝
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination :page-size="10" :current-page="searchList.pn" layout="prev, pager, next"
                           :total="searchList.total" @current-change="pnChange" v-if="searchList.total > 10">
            </el-pagination>

          </el-tab-pane>
        <!--tab3-->
          <el-tab-pane label="默认评价模板" name="normalTask">

            <el-table @filter-change="filter" :data="commentTaskData" @selection-change="handleSelectionChange"
                      style="width: 100%;">
              <el-table-column prop="id" label="序号" width="60">
              </el-table-column>

              <el-table-column prop="task.babyId" label="宝贝ID" width="120">
                <template slot-scope="props">
                  <a target="_blank" :href="'https://detail.tmall.com/item.htm?id=' + props.row.babyId">
                    {{props.row.babyId}}
                  </a>
                </template>
              </el-table-column>

              <el-table-column prop="text1" label="默认评价" width="200">
              </el-table-column>
              <el-table-column prop="img1" label="默认图片" width="150">
                <template slot-scope="props">
                  <el-button type="text" @click="goodUpdate=true;imgIdSrc=props.row.img1">
                    <img :src="props.row.img1" with="50px" height="50px">
                  </el-button>
                </template>
              </el-table-column>

              <el-table-column prop="text2" label="追加评论" width="200">
              </el-table-column>
              <el-table-column prop="img2" label="追加图片" width="150">
                <template slot-scope="props">
                  <el-button type="text" @click="goodUpdate=true;imgIdSrc=props.row.img2">
                    <img :src="props.row.img2" with="50px" height="50px">
                  </el-button>
                </template>
              </el-table-column>

            </el-table>
            <el-pagination :page-size="10" :current-page="searchList.pn" layout="prev, pager, next"
                           :total="searchList.total" @current-change="pnChange" v-if="searchList.total > 10">
            </el-pagination>


          </el-tab-pane>
          <el-tab-pane label="追加评价模板" name="toaddTask">
          <el-table @filter-change="filter" :data="commentTaskZData" @selection-change="handleSelectionChange"
                    style="width: 100%;">
            <el-table-column prop="id" label="序号" width="60">
            </el-table-column>

            <el-table-column prop="task.babyId" label="宝贝ID" width="120">
              <template slot-scope="props">
                <a target="_blank" :href="'https://detail.tmall.com/item.htm?id=' + props.row.babyId">
                  {{props.row.babyId}}
                </a>
              </template>
            </el-table-column>
            <el-table-column prop="text2" label="追加评论" width="200">
            </el-table-column>
            <el-table-column prop="img2" label="追加图片" width="150">
              <template slot-scope="props">
                <el-button type="text" @click="goodUpdate=true;imgIdSrc=props.row.img2">
                  <img :src="props.row.img2" with="50px" height="50px">
                </el-button>
              </template>
            </el-table-column>

          </el-table>
          <el-pagination :page-size="10" :current-page="searchList.pn" layout="prev, pager, next"
                         :total="searchList.total" @current-change="pnChange" v-if="searchList.total > 10">
          </el-pagination>

        </el-tab-pane>
      </el-tabs>


      <el-dialog title="" :visible.sync="goodUpdate" custom-class="backupdedleteUserDialog" with="500px">
        <el-form label-width="110px" >
          <img :src="imgIdSrc"  with="300px" height="700px">
        </el-form>

      </el-dialog>
      <!--默认带字上图好评-->
      <el-dialog title="" :visible.sync="goodSend1">
      <el-form label-width="110px">
        <h4 style="text-align: center;">
          发布默认带字上图好评
        </h4>
        <el-form-item style="text-align: center;" label="宝贝id">
          <el-input auto-complete="off" type="input" autosize
                    :autosize="{ minRows: 3, maxRows: 12} " v-model='CommentTastData.babyId'  ></el-input>
        </el-form-item>
        <el-form-item label="默认评价">
          <el-input auto-complete="off" type="textarea" autosize
                    :autosize="{ minRows: 3, maxRows: 12} " v-model='CommentTastData.content' ></el-input>
        </el-form-item>
        <el-form-item label="默认图片">
          <el-upload
            ref="upload1"
            class="upload-demo"
            action="http://39.104.83.69:2727/v1/api/other/UploadImg"
            multiple
            :limit="6"
            :on-success="uploadSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="追加评论">
          <el-input auto-complete="off" type="textarea" v-model='CommentTastData.contentAdd' autosize
                    :autosize="{ minRows: 3, maxRows: 12}"></el-input>
        </el-form-item>
        <el-form-item label="追加图片">
          <el-upload
            ref="upload1"
            class="upload-demo"
            action="http://39.104.83.69:2727/v1/api/other/UploadImg"
            multiple
            :limit="6"
            :on-success="uploadSuccess1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>


        <el-form-item style="text-align: center;">
          <!--<input type="hidden" name="type" value="user">-->
          <el-button type="primary" style="width: 200px;" @click="submitData()">提交默认上图好评</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
      <!--追加带字上图好评-->
      <el-dialog title="" :visible.sync="goodSend2" custom-class="backupdedleteUserDialog">
        <el-form label-width="110px">
          <h4 style="text-align: center;">
            发布追加上图好评
          </h4>
          <el-form-item style="text-align: center;" label="宝贝id">
            <el-input auto-complete="off" type="input" autosize
                      :autosize="{ minRows: 3, maxRows: 12} " v-model='CommentTastData.babyId'  ></el-input>
          </el-form-item>

          <el-form-item label="追加评论">
            <el-input auto-complete="off" type="textarea" v-model='CommentTastData.contentAdd' autosize
                      :autosize="{ minRows: 3, maxRows: 12}"></el-input>
          </el-form-item>
          <el-form-item label="追加图片">
            <el-upload
              ref="upload1"
              class="upload-demo"
              action="http://39.104.83.69:2727/v1/api/other/UploadImg"
              multiple
              :limit="6"
              :on-success="uploadSuccess1"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item style="text-align: center;">
            <el-button type="primary" style="width: 200px;" @click="submitData2">提交追加上图好评</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>


    </div>
</template>
<script>
    export default {
        data() {
            return {
              loading:true,
              CommentTastData :{
                babyId:'',
                content:'',
                imgArr:[],
                contentAdd:'',
                imgArrAdd:[],
              },
                imgIdSrc:'',
                goodUpdate: false,
                goodSend1:false,
                goodSend2:false,
                activeName:'normal',
                default: "",
                taskInfoListTemp: {},
                commentData :[
                  {}
                ],
                commentDataType : 0,
                commentTaskData :[],
              commentTaskZData :[],
                value: "",
                list: {
                    num2: 2,
                    num1: 0,
                    data: []
                },
                filterStatus: {
                    task: false,
                    goodcomment: false
                },
                options: [
                    {
                        value: "1",
                        label: "订单待审核"
                    },
                    {
                        value: "2",
                        label: "收货待审核"
                    },
                    {
                        value: "3",
                        label: "完成"
                    },
                    {
                        value: "1001",
                        label: "订单手动审核通过"
                    },
                    {
                        value: "2001",
                        label: "订单审核失败"
                    },
                    {
                        value: "2002",
                        label: "收货审核失败"
                    }
                ],
                searchs: [
                    {
                        value: "id",
                        label: "序号"
                    },
                    {
                        value: "taskid",
                        label: "任务序号"
                    },
                    {
                        value: "user",
                        label: "评价人"
                    }
                ],
                searchList: {
                    search: "user",
                    searchValue: "",
                    filter: {
                        status: "",
                        goodcomment: ""
                    },
                    pn: 1,
                    total: 0
                },
                multipleSelection: []
            };
        },
        methods: {
          submitData(){  //表单1
            let _this = this;
            _this.$http
              .post("/api/api.php", {
                id: "subcommentDemo",
                babyId:_this.CommentTastData.babyId,
                content:_this.CommentTastData.content,
                imgArr:_this.CommentTastData.imgArr,
                contentAdd:_this.CommentTastData.contentAdd,
                imgArrAdd:_this.CommentTastData.imgArrAdd,
              })
              .then(function (response) {
                _this.$message({
                  type: response.data.status,
                  message: response.data.msg
                });
                if(response.data.status == "success"){
                  _this.goodSend1 = false;
                  _this.CommentTastData.babyId = '';
                  _this.CommentTastData.content = '';
                  _this.CommentTastData.imgArr = [];
                  _this.CommentTastData.contentAdd = '';
                  _this.CommentTastData.imgArrAdd = [];
                }


              });
          },
          submitData2(){  //表单1
            let _this = this;
            _this.$http
              .post("/api/api.php", {
                id: "subcommentDemo2",
                babyId:_this.CommentTastData.babyId,
                content:_this.CommentTastData.content,
                imgArr:_this.CommentTastData.imgArr,
                contentAdd:_this.CommentTastData.contentAdd,
                imgArrAdd:_this.CommentTastData.imgArrAdd,
              })
              .then(function (response) {
                _this.$message({
                  type: response.data.status,
                  message: response.data.msg
                });
                if(response.data.status == "success"){
                  _this.goodSend2 = false;
                  _this.CommentTastData.babyId = '';
                  _this.CommentTastData.content = '';
                  _this.CommentTastData.imgArr = [];
                  _this.CommentTastData.contentAdd = '';
                  _this.CommentTastData.imgArrAdd = [];
                }

              });
          },

          handleClick(tab,event){

              let tabName = tab.name
              let _this = this;
              this.searchList.pn = 1;
              if(tabName == 'normal' || tabName == 'toadd'  ){
                let type = 0
                if(tabName == 'toadd' ){  //0.normal,1.toadd
                  type = 1
                }
                _this.commentDataType = type;
                _this.getCommentList()
              }

              if(tabName == 'normalTask' || tabName== 'toaddTask' ){
                  console.log(tabName)
                  if(tabName == 'normalTask'){
                    _this.getCommentTaskList()
                    // getCommentTaskZList

                  }else if(tabName == 'toaddTask'){
                    _this.getCommentTaskZList()
                  }
              }

          },

            tg(rowId,action) {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "commentStatus",
                        rowId:rowId,
                        action: action,
                    })
                    .then(function (response) {
                        _this.$message({
                            type: response.data.status,
                            message: response.data.msg
                        });
                        _this.getCommentList();
                    });
            },
            complaint(a, b) {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "complaint",
                        status: a,
                        taskListId: b
                    })
                    .then(function (response) {
                        _this.getCommentList();
                    });
            },
            rand(a, b) {
            },
            pnChange(pn) {
                this.searchList.pn = pn;
                this.getCommentList();
            },
            filter(value) {
                console.log(value);
                value.filterUser
                    ? (this.searchList.filter.user = value.filterTask[0])
                    : (this.searchList.filter.status = value.filterTask[0]);
            },

            getCommentList(){
              let _this = this;
              _this.$http
                .post("/api/api.php", {
                  id: "getCommentList",
                  type : _this.commentDataType,
                  search: JSON.stringify(_this.searchList)
                })
                .then(function (response) {
                  console.log("getCommentList")
                  console.log(response)
                  _this.commentData = response.data.data;
                  _this.searchList.total = parseInt(response.data.total);
                  _this.loading = false
                });
            },

            getCommentTaskList(){
              let _this = this;
              _this.$http
                .post("/api/api.php", {
                  id: "getBackupNew",
                  search: JSON.stringify(_this.searchList)
                })
                .then(function (response) {
                  console.log("-----------");
                  console.log(response.data.data);
                  _this.commentTaskData = response.data.data;
                  _this.searchList.total = parseInt(response.data.total);
                });
            },
          getCommentTaskZList(){
            let _this = this;
              _this.$http
              .post("/api/api.php", {
                id: "getBackupNewZ",
                search: JSON.stringify(_this.searchList)
              })
              .then(function (response) {
                console.log("444444444444444444");
                console.log(response.data.data)
                _this.commentTaskZData = response.data.data;
                _this.searchList.total = parseInt(response.data.total);
              });
          },
          switchTaskInfoStatus(a, b) {
              let title;
              let _this = this;
              a === 2 ? (title = "确认任务 " + b + " 状态更新为审核通过?") : 1;
              _this
                  .$confirm(title, "提示", {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      type: "warning"
                  })
                  .then(() => {
                      _this.$http
                          .post("/api/api.php", {
                              id: "updateTaskInfoStatus",
                              user: b,
                              status: a
                          })
                          .then(function (response) {
                              _this.$message({
                                  type: response.data.status,
                                  message: response.data.msg
                              });
                              _this.getCommentList();
                          });
                  })
                  .catch(() => {
                      this.$message({
                          type: "info",
                          message: "已取消"
                      });
                  });
          },
          check(a, b) {
              let _this = this;
              _this.value = "";
              _this
                  .$confirm("确认操作", "提示", {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      type: "warning"
                  })
                  .then(() => {
                      _this.$http
                          .post("/api/api.php", {
                              id: "updateTaskInfoCheck",
                              user: a,
                              status: b
                          })
                          .then(function (response) {
                              _this.$message({
                                  type: response.data.status,
                                  message: response.data.msg
                              });
                              _this.getCommentList();
                          });
                  })
                  .catch(() => {
                      this.$message({
                          type: "info",
                          message: "已取消"
                      });
                  });
          },
          handleSelectionChange(val) {
              this.multipleSelection = val;
          },
          uploadSuccess(a) {
          console.log(a.data.url)
            this.CommentTastData.imgArr.push(a.data.url)
          },
          uploadSuccess1(a) {
          console.log(a.data.url)
          this.CommentTastData.imgArrAdd.push(a.data.url)
          },

        },
        mounted() {
            this.default = window.location.host;
            this.getCommentList();
        }
    };
</script>
<style scoped>
    .paperz {
        height: 90%;
        padding: 15px;
    }

    .demo-table-expand {
        font-size: 0;
        margin-left: 50px;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    .dedleteUserDialog {
        width: 980px;
    }

    .task_footer {
        position: fixed;
        left: 20px;
        bottom: 20px;
    }

    .task_footer a {
        text-decoration: underline;
    }
</style>
